<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :title="isEdit ? '修改党支部分管范围' : '新增党支部分管范围'"
    width="800px"
  >
    <el-form :model="form" ref="form" label-width="100px" :rules="rules">
      <el-form-item label="党支部名称" prop="branchId">
        <!-- <el-input v-model="form.branchId" placeholder="请输入党支部名称" /> -->
        <dept-select ref="deptSelect" :selectValue="form.branchId" @select="handleDeptSelect" />
      </el-form-item>
      <!-- <el-form-item label="党支部编码" prop="branchCode">
        <el-input v-model="form.branchCode" placeholder="请输入党支部编码" />
      </el-form-item>-->
      <el-form-item label="科室" prop="deptId">
        <el-cascader
          @change="handleChange"
          v-model="form.deptId"
          class="cascaderLm"
          style="width: 100%"
          :options="deptOptions"
          :props="props"
          clearable
          filterable
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSure">{{ isEdit ? '修改' : '新增' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveBranchDept, updateBranchDept, getBranchOfDeptId } from '@/api/morality'
import { openNotification } from '@/utils/util'
import { getDeptTree } from '@/api/department'
import DeptSelect from '@/components/DeptSelect'

export default {
  components: {
    DeptSelect
  },
  data() {
    return {
      visible: false,
      isEdit: false,
      props: { multiple: true, expandTrigger: 'hover', checkStrictly: true },
      deptOptions: [],
      form: {
        branchId: null,
        deptId: null,
        sysBranchDeptList: null,
        branchOrder: 0
      },
      rules: {
        branchId: [{ required: true, message: '请输入党支部名称', trigger: 'blur' }],
        // branchCode: [{ required: true, message: '请选择党支部编码', trigger: 'blur' }],
        deptId: [{ required: true, message: '请选择党支部编码', trigger: 'blur' }],
        branchOrder: [{ type: 'number', message: '请输入数字', trigger: 'blur' }]
      },
      deptIdArr: []
    }
  },
  mounted() {
    getDeptTree().then(res => {
      const arr = res.data
      arr.map(v => {
        v.label = v.title
        if (v.children && v.children.length > 0) {
          v.children.map(j => {
            j.label = j.title
            if (j.children && j.children.length > 0) {
            } else {
              delete j.children
            }
          })
        } else {
          delete v.children
        }
      })
      this.$nextTick(() => {
        this.deptOptions = arr
      })
    })
  },
  methods: {
    changeData(arr) {
      arr.map((v, index) => {
        this.deptIdArr.map(j => {
          if (v.key === j) {
            if (!this.isEdit) {
              this.$set(arr[index], 'disabled', true)
            } else {
              this.$set(arr[index], 'disabled', false)
            }
            // v.disabled = true
          }
          if (v.children && v.children.length > 0) {
            this.changeData(v.children)
          }
        })
      })
    },
    async getDeptId() {
      const res = await getBranchOfDeptId()
      this.deptIdArr = res.data
      this.changeData(this.deptOptions)
      // this.changeData.splice()
    },
    handleDeptSelect(value) {
      this.$set(this.form, 'branchId', value.id)
    },
    handleChange(val) {
      console.log('val', val)
    },
    edit(bool, obj) {
      console.log('bool', bool)
      this.visible = true
      this.isEdit = bool
      this.form = Object.assign({}, obj)
      if (!bool) {
        this.$set(this.form, 'branchOrder', 0)
      } else {
        let arr = []
        obj.deptNameList.map(v => {
          if (v.deptId.length > 3) {
            let str = v.deptId.substring(0, 3)
            arr.push([str, v.deptId])
          } else {
            arr.push([v.deptId])
          }
        })
        this.$set(this.form, 'deptId', arr)
      }
      this.getDeptId()
    },
    handleSure() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let res = '',
            mes = ''
          let arr = this.form.deptId.reduce(function(a, b) {
            return a.concat(b)
          })
          arr = [...new Set(arr)]
          // console.log('deptId', this.form.deptId, arr)
          let arr1 = []
          arr.map(v => {
            arr1.push({ deptId: v, branchId: this.form.branchId })
          })

          // this.form.deptId.map(v => {
          //   arr.push({
          //     deptId: v[v.length - 1]
          //   })
          // })
          // this.$set(this.form, 'sysBranchDeptList', arr)
          if (this.isEdit) {
            mes = '修改操作成功'
            this.$set(this.form, 'deptNameList', arr1)
            delete this.form.deptId
            res = await updateBranchDept(this.form)
          } else {
            mes = '新增操作成功'
            res = await saveBranchDept(arr1)
          }
          if (res.state === '000000') {
            openNotification('success', mes)
            this.visible = false
            this.$emit('refresh')
          }
        }
      })
    }
  }
}
</script>

